<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>肌咪搞人小工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            height: 100vh; overflow: hidden;
            display: flex; justify-content: center; align-items: center;
            padding: 15px; color: #fff;
        }
        .container {
            width: 100%; max-width: 500px;
            background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px);
            border-radius: 20px; padding: 25px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            position: relative; overflow: hidden;
        }
        .scene { display: none; animation: fadeIn 0.5s ease; }
        #scene1 { display: block; }
        .header { text-align: center; margin-bottom: 25px; }
        .header h1 { font-size: 28px; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
        .header p { font-size: 16px; opacity: 0.9; }
        input {
            width: 100%; padding: 15px; border-radius: 50px;
            border: none; margin: 20px 0; font-size: 18px;
            text-align: center; box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
        }
        .btn {
            background: linear-gradient(to right, #ff6b6b, #ff8e53);
            color: white; border: none;
            padding: 15px 30px; border-radius: 50px;
            font-size: 18px; font-weight: bold;
            cursor: pointer; display: block;
            width: 100%; margin: 15px 0;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(255,107,107,0.4);
        }
        .btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255,107,107,0.6); }
        .btn:active { transform: translateY(1px); }
        .dummy-container {
            position: relative; width: 200px; height: 300px;
            margin: 20px auto;
        }
        .dummy-img { width: 100%; height: 100%; object-fit: contain; }
        .name-tag {
            position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
            background: #ff6b6b; color: white;
            padding: 8px 20px; border-radius: 30px;
            font-weight: bold; font-size: 18px;
            white-space: nowrap; z-index: 20;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            animation: pulse 1.5s infinite;
        }
        .options {
            display: flex; flex-wrap: wrap;
            justify-content: center; gap: 15px;
            margin-top: 30px;
        }
        .option-btn {
            flex: 1; min-width: 120px;
            background: linear-gradient(to right, #ffd166, #ffb347);
            color: #6a11cb; font-weight: bold;
        }
        .result-container {
            margin: 30px auto; width: 100%; max-width: 300px;
            border-radius: 20px; overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .result-description { text-align: center; }
        .restart-btn { background: linear-gradient(to right, #06d6a0, #4ce0b3); }
        .footer { text-align: center; margin-top: 20px; font-size: 14px; opacity: 0.7; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes pulse { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } 100% { transform: translateX(-50%) scale(1); } }
        @media (max-width: 480px) {
            .container { padding: 15px; }
            .header h1 { font-size: 24px; }
            .dummy-container { width: 180px; height: 270px; }
            .btn { padding: 12px 25px; font-size: 16px; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="scene" id="scene1">
            <div class="header">
                <h1><i class="fas fa-angry"></i> 肌咪搞人小工具</h1>
                <p>老大，快输入惹你不高兴的人！</p>
            </div>
            <input type="text" id="nameInput" placeholder="输入名字或代号..." autocomplete="off">
            <button class="btn" onclick="startRevenge()"><i class="fas fa-bolt"></i> 小肌咪出击！</button>
            <div class="footer">温馨提示：本工具仅供娱乐，无任何埋点追踪，请放心使用噢~</div>
        </div>
        <div class="scene" id="scene2">
            <div class="header">
                <h1><i class="fas fa-fist-raised"></i> 选择发泄方式</h1>
                <p>对<span id="targetName">某人</span>执行正义制裁！</p>
            </div>
            <div class="dummy-container">
                <div class="name-tag" id="dummyNameTag">某人</div>
                <img src="media/jiaren.png" alt="假人" class="dummy-img" id="dummyImage">
            </div>
            <div class="options">
                <button class="btn option-btn" onclick="showResult(1)"><i class="fas fa-poop"></i> 天降正义</button>
                <button class="btn option-btn" onclick="showResult(2)"><i class="fas fa-meteor"></i> 耄耋の爱</button>
                <button class="btn option-btn" onclick="showResult(3)"><i class="fas fa-bomb"></i> 坤坤出击</button>
            </div>
            <button class="btn restart-btn" onclick="restart()"><i class="fas fa-redo"></i> 重新输入</button>
        </div>
        <div class="scene" id="scene3">
            <div class="header">
                <h1 id="resultTitle"><i class="fas fa-fire"></i> 惩罚执行中...</h1>
                <p>对<span id="resultTarget">某人</span>的惩罚已完成！</p>
            </div>
            <div class="result-container" id="resultContainer"></div>
            <div class="result-description" id="resultDescription"><p>惩罚效果将持续24小时！</p></div>
            <button class="btn" onclick="backToScene2()"><i class="fas fa-arrow-left"></i> 返回选择</button>
            <button class="btn restart-btn" onclick="restart()"><i class="fas fa-redo"></i> 惩罚下一个人</button>
        </div>
    </div>
    <script>
        let currentName = "";
        const results = {
            1: { title: "天降正义！", description: "大便超人使用了从天而降，效果拔群！", image: "media/dabian.gif" },
            2: { title: "耄耋制裁！", description: "TA被正义的耄耋打的鼻青脸肿！", image: "media/maodieai.mp4" },
            3: { title: "坤坤出击！", description: "TA被坤坤当成篮球打，扣1给哥哥点赞！", image: "media/kunkun.mp4" }
        };
        function startRevenge() {
            const name = document.getElementById('nameInput').value.trim();
            if (!name) { alert("请先输入要惩罚的人的名字哦~"); return; }
            currentName = name;
            document.getElementById('targetName').textContent = name;
            document.getElementById('dummyNameTag').textContent = name;
            document.getElementById('resultTarget').textContent = name;
            document.getElementById('scene1').style.display = 'none';
            document.getElementById('scene2').style.display = 'block';
        }
        function showResult(option) {
            const { title, description, image } = results[option];
            document.getElementById('resultTitle').textContent = title;
            document.getElementById('resultDescription').innerHTML = `<p>${description}</p>`;
            const container = document.getElementById('resultContainer');
            container.innerHTML = '';
            const ext = image.split('.').pop().toLowerCase();
            if (ext === 'mp4' || ext === 'webm' || ext === 'ogg') {
                const vid = document.createElement('video');
                vid.src = image; vid.controls = false; vid.autoplay = true; vid.loop = true; vid.muted = true;
                vid.style.width = '100%'; vid.style.maxHeight = '250px'; vid.style.borderRadius = '15px';
                container.appendChild(vid);
            } else {
                const img = document.createElement('img');
                img.src = image; img.alt = '惩罚动图';
                img.style.width = '100%'; img.style.maxHeight = '250px'; img.style.objectFit = 'contain'; img.style.borderRadius = '15px';
                container.appendChild(img);
            }
            document.getElementById('scene2').style.display = 'none';
            document.getElementById('scene3').style.display = 'block';
        }
        function backToScene2() {
            document.getElementById('scene3').style.display = 'none';
            document.getElementById('scene2').style.display = 'block';
        }
        function restart() {
            document.getElementById('nameInput').value = ''; document.getElementById('scene2').style.display = 'none'; document.getElementById('scene3').style.display = 'none'; document.getElementById('scene1').style.display = 'block';
        }
        function replaceDummyImage(imageUrl) { document.getElementById('dummyImage').src = imageUrl; }
        window.onload = function() { replaceDummyImage('media/jiaren.png'); };
    </script>
</body>
</html>
